<!DOCTYPE html>
<html>
<head>
    <title>EaselJS: Filters Example</title>

    <link type="text/css" href="assets/demoStyles.css" rel="stylesheet" />
    <link type="text/css" href="assets/css/dark-hive/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

    <script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
   	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
   	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
   	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
   	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
   	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
    <script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
   	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
   	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
   	<script type="text/javascript" src="../src/easeljs/filters/BoxBlurFilter.js"></script>
   	<script type="text/javascript" src="../src/easeljs/filters/ColorFilter.js"></script>
    <script type="text/javascript" src="../src/easeljs/filters/ColorMatrix.js"></script>
   	<script type="text/javascript" src="../src/easeljs/filters/ColorMatrixFilter.js"></script>

   	<!-- We also provide hosted minified versions of all CreateJS libraries.
   	  http://code.createjs.com -->

    <script type="text/javascript">

        var img;
        var stage;
        var bmp;
        var DELTA_INDEX;
        var blurXSlider;
        var blurFilter, hueFilter, constrastFilter, saturationFilter, brightnessFilter;
        var redChannelFilter, greenChannelFilter, blueChannelFilter;
        var colorFilter;
        var slideInterval = -1;
        var cm;

        function init() {
        	if (window.top != window) {
        		document.getElementById("header").style.display = "none";
        	}
	        document.getElementById("loader").className = "loader";

            img = new Image();
            img.onload = handleImageLoad;
            img.src = "assets/flowers_small.jpg";
        }

        function handleImageLoad() {
	        document.getElementById("loader").className = "";

            var canvas = document.getElementById("testCanvas");

            stage = new createjs.Stage(canvas);

            bmp = new createjs.Bitmap(img);
	        bmp.scaleX = bmp.scaleY = 2;
            bmp.cache(0,0,img.width,img.height);
            stage.addChild(bmp);

            $(".brightnessSlider").slider({
                value: 0,
                min: -100,
                max: 100,
                disabled:false,
	            change:handleChange,
	            slide: handleSlide
            });

            $(".saturationSlider").slider({
                value: 0,
                min: -100,
                max: 100,
                disabled:false,
	            change:handleChange,
	            slide: handleSlide
            });

            $(".contrastSlider").slider({
                value: 0,
                min: -100,
                max: 100,
                disabled:false,
	            change:handleChange,
	            slide: handleSlide
            });

            $(".hueSlider").slider({
                value: 0,
                min: -100,
                max: 100,
                disabled:false,
	            change:handleChange,
	            slide: handleSlide
            });

            $(".blurYSlider").slider({
                value: 0,
                min: 0,
                max: 30,
                disabled:false,
	            change:handleChange,
	            slide: handleSlide
            });

            $(".blurXSlider").slider({
                value: 0,
                min: 0,
                max: 30,
                disabled:false,
	            change:handleChange,
	            slide: handleSlide
            });

            $(".redChannelSlider").slider({
                value: 255,
                min: 0,
                max: 255,
                disabled:false,
	            change:handleChange,
	            slide: handleSlide
            });

            $(".greenChannelSlider").slider({
                value: 255,
                min: 0,
                max: 255,
                disabled:false,
	            change:handleChange,
	            slide: handleSlide
            });

            $(".blueChannelSlider").slider({
                value: 255,
                min: 0,
                max: 255,
                disabled:false,
	            change:handleChange,
	            slide: handleSlide
            });

            $("#resetBtn").click(handleReset);

            applyEffect();
        }

        function handleSlide() {
	        if (slideInterval == -1) {
		        slideInterval = setInterval(applyEffect, 250);
	        }
        }

        function handleChange() {
	        clearInterval(slideInterval);
	        slideInterval = -1;
	        applyEffect();
        }

        function applyEffect() {
            var brightnessValue = $(".brightnessSlider").slider("option", "value");
            var contrastValue =  $(".contrastSlider").slider("option", "value");
            var saturationValue =  $(".saturationSlider").slider("option", "value");
            var hueValue = $(".hueSlider").slider("option", "value");

            var blurXValue = $(".blurXSlider").slider("option", "value");
            var blurYValue = $(".blurYSlider").slider("option", "value");

            var redChannelvalue = $(".redChannelSlider").slider("option", "value");
            var greenChannelValue = $(".greenChannelSlider").slider("option", "value");
            var blueChannelValue = $(".blueChannelSlider").slider("option", "value");

            cm = new createjs.ColorMatrix();
            cm.adjustColor(brightnessValue, contrastValue, saturationValue, hueValue);

            colorFilter = new createjs.ColorMatrixFilter(cm);
            blurFilter = new createjs.BoxBlurFilter(blurXValue,  blurYValue, 2);
            redChannelFilter = new createjs.ColorFilter(redChannelvalue/255,1,1,1);
            greenChannelFilter = new createjs.ColorFilter(1,greenChannelValue/255,1,1);
            blueChannelFilter = new createjs.ColorFilter(1,1,blueChannelValue/255,1);

            updateImage();
        }

        function handleReset() {
            $(".brightnessSlider").slider("option", "value", 0);
            $(".saturationSlider").slider("option", "value", 0);
            $(".hueSlider").slider("option", "value", 0);
            $(".blurYSlider").slider("option", "value", 0);
            $(".blurXSlider").slider("option", "value", 0);
            $(".contrastSlider").slider("option", "value", 0);
            $(".redChannelSlider").slider("option", "value", 255);
            $(".greenChannelSlider").slider("option", "value", 255);
            $(".blueChannelSlider").slider("option", "value", 255);

            applyEffect();
        }

        function updateImage() {
            bmp.filters = [colorFilter, blurFilter, redChannelFilter, greenChannelFilter, blueChannelFilter];
            bmp.updateCache();
            stage.update();
        }

    </script>

    <style type="text/css">
        /* define a width for the sliders by styling the wrapping div */
        .hueSlider { width:100px; }
        .saturationSlider { width:100px; }
        .contrastSlider { width:100px; }
        .brightnessSlider { width:100px; }
        .blurXSlider { width:100px; }
        .blurYSlider { width:100px; }
        .redChannelSlider { width:100px; }
        .greenChannelSlider { width:100px; }
        .blueChannelSlider { width:100px; }
    </style>
</head>
<body onload="init()">

	<div id="loader"></div>

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> Filters</h1>
	    <p>Demonstrates using filters. Change the values in order to preview the results. Filters are applied on top of each other.</p>
	</header>

	<canvas id="testCanvas" width="960" height="250"></canvas>
    <table>
        <td>
        <table cellspacing="7" border="0" cellpadding="3">
            <tr>
                <th><div>Brightness:</div></th>
                <td><div class="brightnessSlider"></div></td>
            <td>
                <th><div>Contrast:</div></th>
                <td><div class="contrastSlider"></div></td>
            </td>
            </tr>
            <tr>
                <th><div>Hue:</div></th>
                <td><div class="hueSlider"></div></td>

            <td>
                <th><div>Saturation:</div></th>
                <td><div class="saturationSlider"></div></td>
            </td>
            </tr>
        </table>
        </td>
        <td>
            <table cellspacing="7" border="0" cellpadding="3">
                <tr>
                    <th rowspan="1" align="center">Blur:</th>
                    <td>
                        <div class="blurXSlider"></div>
                    </td>
                    <td>
                        <div class="blurYSlider"></div>
                    </td>
                </tr>
                <tr>
                    <th><div>RGB:</div></th>
                    <td>
                        <div class="redChannelSlider"></div>
                    </td>
                    <td>
                        <div class="greenChannelSlider"></div>

                    </td>
                    <td>
                        <div class="blueChannelSlider"></div>
                    </td>
                </tr>
            </table>
        </td>
    </table>
    <input type="button" id="resetBtn" name="resetBtn" value="Reset" />

</body>
</html>